<template>
  <div class="app-content-wrap" :style="'minHeight:' + gHeight + 'px;'" @click="hideIcon">
    <div class="g-content-title">场景管理</div>
    <div class="type-select">
      <el-form ref="form" :model="moduleObj" label-width="80px" size="small">
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="街道">
              <el-select @change="firstLevelChange" v-model="areaIds.areaId1" placeholder="请选择所属街道">
                <el-option label="请选择街道" value=""></el-option>
                <el-option v-for="item in firstArr" :key="item.deptId" :value="item.deptId"
                           :label="item.deptName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="小区" prop="deptId">
              <el-select @change="secondLevelChange" v-model="areaIds.areaId2" placeholder="请选择所属小区">
                <el-option label="请选择小区" :value="areaIds.areaId1"></el-option>
                <el-option v-for="item in secondArr" :key="item.deptId" :value="item.deptId"
                           :label="item.deptName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div v-show="editShow" class="type-wrap">
      <div class="type-content">
        <ul>
          <li class="top_li" v-for="(item, index) in moduleTree" :key="index">
            <span class="top_font"
                  @click="modifyModule(item.moduleId,item.moduleName,item.icon,item.showFlag)">{{item.moduleName}}</span>

            <el-button type="text" size="small" @click="removeModule(item.moduleId)">刪除</el-button>
            <el-button type="text" size="small" @click="addChild(item.moduleId,item.moduleName)">添加子节点</el-button>
            <span class="showFlag">{{ item.showFlag === 1 ? '显示状态' : '隐藏状态' }}</span>
            <ul>
              <li class="top_font_li" v-for="(item2, index) in item.nodes" :key="index">
                  <span class="top_font2"
                        @click="updateNode(item2.moduleName,item.moduleId,item2.moduleId,item2.icon, item2.moduleCode, item2.showFlag)">
                    {{item2.moduleName}} &nbsp;&nbsp;  {{ item2.hasOwnProperty('desc') ? '(' + item2.desc.text + ')' : ''
                    }}
                  </span>
                <el-button type="text" size="small" @click="removeModule(item2.moduleId)">刪除</el-button>
                <span class="showFlagSub">{{ item2.showFlag === 1 ? '显示状态' : '隐藏状态' }}</span>
              </li>
            </ul>
          </li>
        </ul>
        <br>
        <el-button type="warning" @click="submitModule()">新增场景</el-button>
        <!--新增场景-->
      </div>

      <div class="set_module">
        <el-form :model="moduleObj" status-icon label-width="150px">
          <el-form-item :label="setupName" class="module_set">
            <p>{{moduleObj.parentName}}</p>
          </el-form-item>
          <el-form-item label="节点名称">
            <el-input type="text" v-model="moduleObj.moduleName" placeholder="请输入节点名称"></el-input>
          </el-form-item>
          <el-form-item label="是否显示">
            <el-radio-group v-model="moduleObj.showFlag">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="codeShow" label="场景代码">
            <el-select v-model="moduleObj.moduleCode" placeholder="请选择场景代码" @focus="hideIcon">
              <el-option v-for="item in codeArr" :key="item.code" :value="item.code" :label="item.text"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择图标">
            <div @click.stop="showIcon()">
              <el-input type="text" suffix-icon="el-icon-more" :readonly="iconBool"></el-input>
              <div class="selectedIcon"><i :class="moduleObj.logo"></i></div>
            </div>
            <div class="font_icon" v-show="iconSelect">
              <el-row :gutter="10">
                <el-col v-for="(icon, index) in iconArr" :key="index" :span="4">
                  <div class="font_icon_inner" @click="getIcon(icon)"><i :class="icon"
                                                                         style="font-size:20px;cursor: pointer;"></i>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitNode()">提交</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
  </div>
</template>
<script>
import iconArray from '../../assets/styles/icon.json'

export default {
  name: 'typeList',
  data () {
    return {
      radioShow: 1,
      gHeight: this.$store.state.gHeight,
      editShow: false, // 编辑区域是否显示
      iconBool: true, // 选择图标是否只读
      moduleTree: [],
      firstArr: [],
      secondArr: [],
      codeShow: false, // 场景代码显示隐藏
      codeArr: [], // 场景代码数组
      iconSelect: false, // 图标下拉显示隐藏
      moduleObj: {
        moduleName: '',
        logo: '',
        parentId: '',
        parentName: '',
        moduleId: '',
        deptId: '',
        moduleCode: '', // 场景代码
        showFlag: '' // 显示隐藏节点
      },
      areaIds: {
        areaId1: '', // 所属1级
        areaId2: '' // 所属2级
      },
      moduleName: '',
      setupName: '',
      iconArr: iconArray.iconArr,
      showFlagTextRoot: '显示', // 根节点显示状态
      showFlagTextSub: '显示' // 子节点显示状态
    }
  },
  mounted () {
    this.setupName = '新增场景'
    this.getList()
    // this.getModuleTree()
    this.getChildList()
  },
  methods: {
    updateNode (name, supId, id, icon, code, showFlag) {
      // 修改节点
      this.setupName = '修改节点'
      this.moduleObj.moduleName = name
      this.moduleName = ''
      this.moduleObj.parentName = ''
      this.moduleObj.parentId = supId
      this.moduleObj.moduleId = id
      this.moduleObj.logo = icon
      this.codeShow = true
      this.$nextTick(() => {
        if (showFlag === 1) {
          this.moduleObj.showFlag = 1
        } else {
          this.moduleObj.showFlag = 0
        }
      })
      this.moduleObj.moduleCode = code
      // let data = {
      //   moduleName: this.moduleObj.moduleName,
      //   supModuleId: 0,
      //   moduleId: this.moduleObj.moduleId,
      //   imageNumber: this.moduleObj.logo
      // }
    },
    submitModule () {
      this.setupName = '新增场景'
      this.moduleObj.parentName = ''
      this.moduleObj.moduleName = ''
      this.moduleObj.logo = ''
      this.codeShow = false
      this.moduleObj.moduleCode = ''
    },
    getChildList () { // 获取所有可用的二级场景
      let url = this.$base.getUrl('getValidChildModuleList')
      this.$store.dispatch('getForm', {
        url: url
      }).then(res => {
        this.codeArr = res
      })
    },
    getIcon (icon) {
      this.moduleObj.logo = icon
      this.iconSelect = false
    },
    showIcon () {
      this.iconSelect = !this.iconSelect
    },
    hideIcon () {
      if (this.iconSelect) this.iconSelect = false
    },
    submitNode () {
      if (this.setupName === '修改场景') {
        let url = this.$base.getUrl('updateModule')
        let data = {
          moduleName: this.moduleObj.moduleName,
          supModuleId: 0,
          moduleId: this.moduleObj.moduleId,
          imageNumber: this.moduleObj.logo,
          deptId: this.moduleObj.deptId,
          showFlag: this.moduleObj.showFlag
        }
        this.$store.dispatch('postForm', {
          url: url,
          data: data
        }).then(res => {
          if (res.code === 0) {
            this.getModuleTree()
            this.$message({
              type: 'success',
              message: '修改成功！'
            })
          }
        })
      }

      if (this.setupName === '修改节点') {
        let url = this.$base.getUrl('updateModule')
        let data = {
          moduleName: this.moduleObj.moduleName,
          // supModuleId: this.moduleObj.parentId,
          moduleId: this.moduleObj.moduleId,
          moduleCode: this.moduleObj.moduleCode,
          imageNumber: this.moduleObj.logo,
          deptId: this.moduleObj.deptId,
          showFlag: this.moduleObj.showFlag
        }
        this.$store.dispatch('postForm', {
          url: url,
          data: data
        }).then(res => {
          if (res.code === 0) {
            this.getModuleTree()
            this.$message({
              type: 'success',
              message: '修改成功！'
            })
          }
        })
      }

      if (this.setupName === '新增场景') {
        let addUrl = this.$base.getUrl('addModule')
        this.$store.dispatch('postForm', {
          url: addUrl,
          data: {
            moduleName: this.moduleObj.moduleName,
            moduleLv: 1,
            imageNumber: this.moduleObj.logo,
            deptId: this.moduleObj.deptId,
            moduleCode: this.moduleObj.moduleCode,
            supModuleId: 0,
            showFlag: this.moduleObj.showFlag
          }
        }).then(res => {
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.getModuleTree()
          } else {
            this.$message.error('很抱歉，添加失败！')
          }
        })
      }
      if (this.setupName === '节点添加') {
        /** ********二级节点添加************/
        let addUrl = this.$base.getUrl('addModule')

        this.$store.dispatch('postForm', {
          url: addUrl,
          data: {
            moduleName: this.moduleObj.moduleName,
            supModuleId: this.moduleObj.parentId,
            moduleLv: 2,
            imageNumber: this.moduleObj.logo,
            deptId: this.moduleObj.deptId,
            moduleCode: this.moduleObj.moduleCode,
            showFlag: this.moduleObj.showFlag
          }
        }).then(res => {
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.getModuleTree()
          } else {
            this.$message.error('很抱歉，添加失败！')
          }
        })
      }
    },
    getModuleTree () {
      const url = this.$base.getUrl('getModuleInfoTree')
      this.$store.dispatch('getForm', {
        url: url,
        data: {
          deptId: this.moduleObj.deptId
        }
      }).then(res => {
        if (res.nodes) {
          this.moduleTree = res.nodes
        } else {
          this.$message.error('拉取信息失败，请检查网络连接！')
        }
      })
    },
    modifyModule (id, name, icon, showFlag) {
      this.setupName = '修改场景'

      this.moduleName = name
      this.moduleObj.moduleName = name
      this.moduleObj.logo = icon
      this.moduleObj.moduleId = id
      this.codeShow = false
      this.$nextTick(() => {
        if (showFlag === 1) {
          this.moduleObj.showFlag = 1
        } else {
          this.moduleObj.showFlag = 0
        }
      })
      // $(event.currentTarget).parent().find("ul").toggle();
    },
    addChild (id, name) {
      this.moduleObj.parentId = id
      this.moduleObj.parentName = name
      this.setupName = '节点添加'
      this.moduleObj.moduleName = ''
      this.moduleObj.logo = ''
      this.codeShow = true
      this.moduleObj.moduleCode = ''
    },
    removeModule (id) {
      let delUrl = this.$base.getUrl('delModule')

      this.$confirm('此操作将删除该场景, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('postForm', {
          url: delUrl,
          data: {
            moduleId: id
            // deptId: this.moduleObj.deptId
          }
        }).then(res => {
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getModuleTree()
          } else {
            this.$message.error('很抱歉，删除失败！')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 拉取所属
    getList () {
      const url = this.$base.getUrl('getTree')
      this.$store.dispatch('getForm', {
        url: url
      }).then(res => {
        if (res && res.nodes) {
          this.firstArr = res.nodes
        }
      })
    },
    // 一级所属菜单变化
    firstLevelChange (val) {
      this.editShow = false
      this.secondArr = []
      this.areaIds.areaId2 = val
      this.moduleObj = {
        moduleName: '',
        logo: '',
        parentId: '',
        parentName: '',
        moduleId: '',
        deptId: '',
        moduleCode: '' // 场景代码
      }
      for (let i of this.firstArr) {
        if (val === i.deptId) {
          this.secondArr = i.nodes || []
        }
      }
      this.moduleObj.deptId = val
      // this.getModuleTree()
    },
    // 二级所属菜单变化
    secondLevelChange (val) {
      this.editShow = !!val
      this.moduleObj = {
        moduleName: '',
        logo: '',
        parentId: '',
        parentName: '',
        moduleId: '',
        deptId: '',
        moduleCode: '', // 场景代码
        showFlag: 1
      }
      this.moduleObj.deptId = val
      this.getModuleTree()
    }
  }
}
</script>
<style scoped>
  .module_set {
    font-weight: bold;
    font-size: 15px;
  }

  .font_icon {
    width: 600px;
    position: absolute;
    border: 1px solid #E9E9E9;
    z-index: 99999;
    background-color: #E0E0E0;
    border-radius: 5px;
    padding: 10px;
    line-height: 30px;
    left: 0;
    top: 50px;
  }

  .set_module {
    /*position: relative;*/
    float: left;
    width: 50%;
    padding: 20px;

  }

  .type-content {
    padding: 20px;
    width: 400px;
    float: left;
  }

  .type-content ul > li > ul > li {
    padding-left: 32px;
    line-height: 35px;
    color: #7D7D7D;
    font-weight: 600;
  }

  .top_li {
    border-bottom: 1px solid #E9E9E9;
  }

  .top_li button {
    float: right;
    margin-left: 10px;
  }

  .top_font {
    font-size: 15px;
    color: #333333;
    letter-spacing: 0;
    line-height: 40px;
    font-weight: bold;
    padding-right: 80px;
    padding-left: 10px;
    cursor: pointer;
  }

  span.top_font:hover {
    font-size: 110%;
    color: #F5A623;
  }

  .top_font2 {
    cursor: pointer;
    padding-right: 40px;
  }

  span.top_font2:hover {
    font-size: 110%;
    color: #F5A623;
  }

  .top_font:before {
    content: "";
    line-height: 35px;
    text-align: center;
    background-color: #999999;
    height: 5px;
    width: 5px;
    display: block;
    float: left;
    position: relative;
    bottom: -17.5px;
  }

  .selectedIcon {
    position: absolute;
    background-color: transparent;
    z-index: 0;
    top: 0;
    padding-left: 20px;
    height: 40px;
  }

  .font_icon_inner {
    text-align: center;
  }

  .showFlag {
    float: right;
    padding: 7px 15px;
    font-size: 12px;
    color: rgb(180, 180, 180);
  }

  .showFlagSub {
    float: right;
    padding: 0 15px;
    line-height: 30px;
    font-size: 12px;
    color: rgb(180, 180, 180);
  }
</style>
